<template>
  <div
    :style="{ backgroundImage: `url(${imageUrl}/img/bg_mine@2x.png)` }"
    class="verify-code"
  >
    <nav-bar class="nav-bar-position" :background="'none'">手机号登录</nav-bar>

    <div class="title">
      登录/注册
    </div>

    <div class="inputs">
      <ul>
        <li>
          <div class="label">
            手机号码
          </div>
          <label>
            <input
              class="my-input"
              maxlength="11"
              placeholder="请输入手机号码"
              placeholder-class="placeholder"
              type="number"
              v-model="phone"
            />
          </label>
        </li>
        <li>
          <div class="label">
            验证码
          </div>
          <label class="input">
            <input
              class="my-input"
              placeholder="请输入短信验证码"
              maxlength="6"
              placeholder-class="placeholder"
              type="number"
              v-model="code"
              :focus="focus"
            />
          </label>

          <div @tap="getCode" class="code">
            {{
            restTime < _restTime && restTime > 0
            ? restTime + "s"
            : "发送验证码"
            }}
          </div>
        </li>
      </ul>
    </div>

    <div class="message">
      首次登录将自动为您创建账号
    </div>

    <my-button
      :height="100"
      :width="590"
      @tap="
        reqPhoneLogin({
          phone,
          code
        })
      "
    >
      确定
    </my-button>
  </div>
</template>

<script>
  import { imageUrl } from "../../../api/url.config";
  import { mapActions } from "vuex";
  import { Toast } from "../../../utils/modal";

  export default {
    name: "verify-code",
    data() {
      return {
        imageUrl,

        focus: false,

        restTime: 60,
        _restTime: 60,

        timer: null,
        phone: "",
        code: ""
      };
    },
    methods: {
      ...mapActions("User", ["reqSendMsg", "reqPhoneLogin"]),

      async getCode() {
        if (this.timer) {
          return;
          // Toast({
          //   title: this.restTime + 's后重发'
          // })
        }
        this.focus = true;
        const { phone } = this;
        const p = /^1\d{10}$/;
        if (!phone) {
          return Toast({
            title: "请先输入手机号"
          });
        }
        if (!p.test(phone)) {
          return Toast({
            title: "手机号码格式不正确"
          });
        }

        let res = await this.reqSendMsg({ phone });
        if (!res) {
          return;
        }
        this.timer = setInterval(() => {
          this.restTime = this.restTime - 1;
          if (this.restTime < 0) {
            clearInterval(this.timer);
            this.timer = null;
            console.log(this._restTime);
            this.restTime = 60;
          }
        }, 1000);
      }
    },
    onShow() {
      this.phone = uni.getStorageSync("phone") || "";
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../uni";

  .verify-code {
    @include bg;
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    background: {
      size: 100%;
      repeat: no-repeat;
      position-y: upx(-100);
    }

    .title {
      @include ft(44, #fff, 500);
      padding: upx(260) upx(40) upx(40);
    }

    .inputs {
      width: upx(670);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 36px 0 rgba(122, 137, 130, 0.14);
      border-radius: upx(32);
      box-sizing: border-box;
      padding: upx(70) upx(40);
      margin: auto;

      li {
        display: flex;
        align-items: center;
        border-bottom: upx(2) solid #edf2f3;
        margin-bottom: upx(90);
        padding-bottom: upx(36);

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 30%;
          @include ft(32, #9096a3, 500);
        }

        .input {
          flex: 1;
        }
      }

      .my-input {
        @include ft(32, #273c3d, 300);
      }
    }

    .code {
      width: upx(170);
      height: upx(48);
      line-height: upx(48);
      text-align: center;
      border: upx(2) solid $theme-yellow;
      border-radius: upx(48);
      @include ft(28, $theme-yellow, 500);
    }

    .message {
      margin: upx(76) auto upx(24);
      text-align: center;
      @include ft(28, #bbbfc6, 500);
    }
  }
</style>
